<template>
<div class="card">
  <div class="card-header">
    视频
  </div>
  <div class="card-body p-0">
    <swiper :options="swiperOption">
    <swiper-slide v-for="item in position_1" :key="item.id">
      <img class="img-fluid" :src="'http://www.xinde.org/'+item.thumb" :key="item.thumb">
      <div class="swiper-title text-truncate">{{item.title}}</div>
    </swiper-slide>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
  </div>
</div>
  
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { mapState, mapActions } from "vuex";
export default {
   name: "carouselother",
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        slidesPerView : 2,
  slidesPerGroup : 2,
  slidesPerColumn: 3,
      spaceBetween : 5,
          navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        
      }
    }
  },
  computed: {
    ...mapState('news', ['position_1'])
  },
  created () {
    this.positionChange({ positionId: 1,limit:5 });
  },
  methods: {
    ...mapActions('news', ['positionChange'])
  }
}
</script>
<style scoped>
.swiper-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.5rem;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(transparent),
    to(rgba(0, 0, 0, 0.8))
  );
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
  background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.8) 100%);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
}
.swiper-button-prev, .swiper-button-next{
  height: 22px;

}
</style>
